<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<style type="text/css">
		ul{
			list-style: none;
		}
		li{
			margin: 20px 0;
		}
		span{
			display: inline-block;
			width: 80px;
			text-align: right;
			margin-right: 20px;
		}
		.btn{
			background: #666;
			border-radius: 5px;
			color: #fff;
			cursor: pointer;
			height: 30px;
			line-height: 30px;
			text-align: center;
			width: 120px;
		}
		.btn:hover{
			background: #0ff;
			color: #000;
		}
	</style>

	
</head>
<body>
	<ul>
		<li>
			<span>账号:</span> <input type="text" id="username"  name="name"/>
		</li>
		<li>
			<span>密码:</span> <input type="text" id="pas"  name="name"/>
		</li>
		<li>
			<span>昵称:</span> <input type="text" id="words"  name="name"/>
		</li>
		<li>
			<span><input type="button" value="保存" id="btn"/></span> 
		</li>
	</ul>
	<div class="btn">展示所有数据</div>
	 <ul id="show">
	 	
	 </ul>
</body>
</html>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
	$('#btn').click(function(){
		if($('#username').val()==''){
			alert("账号不能为空")
		}
		if($('#pas').val()==''){
			alert("请输入密码")
		}
		if($('#words').val()==''){
			alert("请设置昵称")
		}
		
	})
	
	
	
	
	
	
	
	
	
	
</script>












